<template>
    <div class="notice-page">
      <el-card>
        <h3 slot="header">公告发布</h3>
        <el-form :model="noticeForm" label-width="100px">
          <el-form-item label="标题">
            <el-input v-model="noticeForm.title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input type="textarea" v-model="noticeForm.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="publishNotice">发布</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-divider></el-divider>
  
      <el-card>
        <h3 slot="header">公告列表</h3>
        <el-row :gutter="20">
          <el-col :span="12" v-for="notice in notices" :key="notice.id">
            <el-card>
              <p>{{ notice.title }}</p>
              <p>{{ notice.content }}</p>
              <el-button type="text" @click="deleteNotice(notice.id)">删除</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const noticeForm = ref({
        title: '',
        content: '',
      });
  
      const notices = ref([
        { id: 1, title: '重要通知', content: '高考期间不能请假' },
        { id: 2, title: '活动公告', content: '天气炎热注意防暑' },
      ]);
  
      const publishNotice = () => {
        const newNotice = {
          id: notices.value.length + 1,
          title: noticeForm.value.title,
          content: noticeForm.value.content,
        };
        notices.value.push(newNotice);
        noticeForm.value.title = '';
        noticeForm.value.content = '';
      };
  
      const deleteNotice = (id) => {
        const index = notices.value.findIndex((notice) => notice.id === id);
        if (index !== -1) {
          notices.value.splice(index, 1);
        }
      };
  
      return {
        noticeForm,
        notices,
        publishNotice,
        deleteNotice,
      };
    },
  };
  </script>
  
  <style>
  .notice-page {
    padding: 20px;
  }
  </style>
  